<style rel="stylesheet/scss" lang="scss" scoped>
.container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .dragWrapper {
        display: flex;
    justify-content: center;
        width: 600px;
    }
    .result{
        width: 600px;
        height: 280px;
        border: 1px solid red;
    }
}
</style>
<template>
    <div class="container">
        <div class="tools">
            <el-button type="primary" @click="handleSubmit">生成</el-button>
            <el-button type="danger" @click="$refs.sign.getStar('这里是用途','这里是单位的名称','123456')">图章</el-button>
            <el-button @click="$refs.sign.clear()">清空</el-button>
        </div>

        <div class="dragWrapper">
            <avue-sign ref="sign" :height="280"></avue-sign>
        </div>
        <div class="result">
            <img :src="img" alt />
        </div>
    </div>
</template>

<script>
import BgImg from '@/assets/images/login_bg_01.jpg'
export default {
    data() {
        return {
            img: ''
        }
    },
    methods: {
        handleSubmit() {
            this.img = this.$refs.sign.submit(80, 50);
            console.log(this.img)
        }
    }
};
</script>

<style scoped>
</style>